<template>
	<view class="pet-home-container">
		<!-- 虚拟宠物互动区域 -->
		<view class="virtual-pet-section">
			<!-- 环境状态栏 -->
			<view class="safe-area-top"></view>
			<view class="status-section">
				<view class="environment-bar">
					<view class="time-weather">
						<view class="time-box">
							<u-icon name="clock" color="#8B5CFF" size="24"></u-icon>
							<text class="time">{{currentTime}}</text>
						</view>
						<view class="weather-box">
							<u-icon name="sun" color="#FFB321" size="24"></u-icon>
							<text class="temperature">{{weather.temperature}}°</text>
							<text class="weather-desc">{{weather.description}}</text>
						</view>
					</view>
				</view>
				
				<!-- 宠物状态 -->
				<view class="pet-status">
					<view class="pet-info">
						<text class="pet-name">{{petName}}</text>
						<text class="pet-mood">{{petMoodText}}</text>
					</view>
					<view class="status-icons">
						<view class="status-item">
							<image src="/static/img/pet-health.svg" mode="aspectFit" class="status-icon"></image>
							<text :style="{ color: hungerLevel > 50 ? '#FF6B81' : '#999' }">{{hungerLevel}}%</text>
						</view>
						<view class="status-item">
							<image src="/static/img/pet-mood.svg" mode="aspectFit" class="status-icon"></image>
							<text :style="{ color: moodLevel > 50 ? '#FFB321' : '#999' }">{{moodLevel}}%</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 宠物对话气泡 -->
			<view class="pet-interaction-area">
				<view class="pet-dialogue-section" v-if="showMoodBubble || isLoading">
					<view class="dialogue-bubble">
						<view v-if="isLoading" class="loading-dots">
							<text class="dot"></text>
							<text class="dot"></text>
							<text class="dot"></text>
						</view>
						<text class="dialogue-text">{{moodMessage}}</text>
					</view>
				</view>
				
				<view class="pet-display" @tap="handlePetTap">
					<image class="pet-image" :class="[petAnimation, {'is-petting': isPetting}]" 
						:src="currentPetImage" mode="aspectFit" @touchstart="startPetting" @touchend="stopPetting"></image>
					<!-- 添加上传按钮 -->
					<view class="upload-pet-btn" @tap.stop="uploadPetImage">
						<u-icon name="camera" color="#FFFFFF" size="24"></u-icon>
					</view>
					<!-- 互动特效 -->
					<view class="interaction-effects">
						<view class="heart-effect" v-if="showHeartEffect"></view>
						<view class="stars-effect" v-if="showStarsEffect"></view>
					</view>
				</view>
			</view>
			
			<!-- 食物抽屉按钮 -->
			<view class="food-drawer-btn" @tap="toggleFoodDrawer">
				<image src="/static/img/paw-icon.svg" mode="aspectFit" class="paw-icon"></image>
				<text>食物</text>
			</view>
			
			<!-- 食物抽屉 -->
			<view class="food-drawer" :class="{'food-drawer-open': showFoodDrawer}">
				<view class="drawer-header">
					<view class="header-title">
						<image src="/static/img/paw-print.svg" mode="aspectFit" class="header-icon"></image>
						<text>美味食物</text>
					</view>
					<view class="close-drawer" @tap="toggleFoodDrawer">
						<u-icon name="close" color="#8B5CFF" size="24"></u-icon>
					</view>
				</view>
				<view class="food-grid">
					<view class="food-item" v-for="(food, index) in foodItems" :key="index" @tap="feedPet(food)">
						<view class="food-icon-wrapper">
							<image :src="food.icon" mode="aspectFit"></image>
						</view>
						<text>{{food.name}}</text>
					</view>
				</view>
			</view>
			
			<!-- 底部聊天输入框 -->
			<view class="chat-input-container">
				<input type="text" v-model="chatInput" 
					placeholder="和我说点什么吧..." 
					@confirm="sendMessage"
					class="chat-input" />
				<button @tap="sendMessage" class="send-btn">
					<u-icon name="arrow-upward" color="#FFFFFF" size="24"></u-icon>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 宠物基础数据
				petName: '小可爱',
				currentPetImage: '/static/img/default-pet-avatar.svg',
				hungerLevel: 80,
				showMoodBubble: false,
				moodMessage: '',
				
				// 聊天相关
				chatInput: '',
				isLoading: false,
				deepseekKey: 'sk-70cfbd501ce147a2a27ac3c1a903bdb7',
				
				// 食物列表
				foodItems: [
					{ name: '小饼干', icon: '/static/img/paw-icon.svg', energy: 10, mood: '好开心！最爱小饼干了！' },
					{ name: '牛奶', icon: '/static/img/paw-icon.svg', energy: 15, mood: '喝到牛奶啦！呼噜呼噜~' },
					{ name: '小鱼干', icon: '/static/img/paw-icon.svg', energy: 20, mood: '鱼鱼好好吃！还想要~' },
					{ name: '火腿肠', icon: '/static/img/paw-icon.svg', energy: 25, mood: '哇！是火腿肠！最爱你了！' }
				],
				
				// 添加新的数据属性
				currentTime: '',
				weather: {
					temperature: 25,
					description: '晴朗'
				},
				moodLevel: 80,
				petMoodText: '心情不错~',
				petAnimation: 'animated',
				isPetting: false,
				showHeartEffect: false,
				showStarsEffect: false,
				lastInteractionTime: Date.now(),
				idleTimer: null,
				showFoodDrawer: false, // 添加食物抽屉状态
				isGenerating: false, // AI生成状态
				stabilityKey: 'YOUR-STABILITY-API-KEY', // 这里替换为实际的API密钥
			}
		},
		onLoad() {
			this.loadMockData();
			this.initPet();
			this.startTimeUpdate();
			this.startIdleAnimation();
		},
		onUnload(){
			// 记得在页面卸载时移除事件监听，避免内存泄漏
			// 清理定时器
			if (this.timeTimer) clearInterval(this.timeTimer);
			if (this.idleTimer) clearInterval(this.idleTimer);
		},
		onShow() {
			
		},
		onHide(){
		},
		methods:{
			// 页面导航
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			
			// 搜索处理
			onSearch(e) {
				const keyword = e.detail.value;
				console.log('搜索关键词:', keyword);
				// TODO: 实现搜索功能
				uni.showToast({
					title: '搜索功能开发中',
					icon: 'none'
				});
			},
			
			// 加载模拟数据
			loadMockData() {
				// 这里可以添加API请求，目前使用静态数据
				console.log('加载首页数据');
			},
			
			// 初始化宠物状态
			async initPet() {
				// 从本地存储获取宠物状态
				const savedPet = uni.getStorageSync('virtualPet');
				if (savedPet) {
					this.hungerLevel = savedPet.hungerLevel;
					this.showMoodBubble = savedPet.showMoodBubble;
					this.moodMessage = savedPet.moodMessage;
				}
				
				// 启动宠物状态自动更新
				this.startPetStatusUpdate();
			},
			
			// 开始宠物状态自动更新
			startPetStatusUpdate() {
				setInterval(() => {
					// 每小时降低5%饥饿度
					this.hungerLevel = Math.max(0, this.hungerLevel - 5);
					this.updatePetMood();
					this.savePetStatus();
				}, 3600000); // 每小时更新一次
			},
			
			// 更新宠物心情
			updatePetMood() {
				if (this.hungerLevel > 80) {
					this.showMoodBubble = true;
					this.moodMessage = '超开心！';
					this.currentPetImage = '/static/img/default-pet-avatar.svg';
				} else if (this.hungerLevel > 50) {
					this.showMoodBubble = true;
					this.moodMessage = '开心！';
					this.currentPetImage = '/static/img/default-pet-avatar.svg';
				} else if (this.hungerLevel > 20) {
					this.showMoodBubble = true;
					this.moodMessage = '有点饿...';
					this.currentPetImage = '/static/img/default-pet-avatar.svg';
				} else {
					this.showMoodBubble = true;
					this.moodMessage = '非常饿...';
					this.currentPetImage = '/static/img/default-pet-avatar.svg';
				}
			},
			
			// 保存宠物状态
			savePetStatus() {
				uni.setStorageSync('virtualPet', {
					hungerLevel: this.hungerLevel,
					showMoodBubble: this.showMoodBubble,
					moodMessage: this.moodMessage
				});
			},
			
			// 投喂宠物
			feedPet(food) {
				if (this.hungerLevel >= 100) {
					this.showMoodMessage('我已经吃饱啦！不能再吃啦！');
					return;
				}
				
				this.hungerLevel = Math.min(100, this.hungerLevel + food.energy);
				this.showMoodMessage(food.mood);
				this.updatePetImage('eating');
				
				// 保存状态
				this.savePetStatus();
			},
			
			// 显示心情泡泡
			showMoodMessage(message) {
				this.moodMessage = message;
				this.showMoodBubble = true;
				setTimeout(() => {
					this.showMoodBubble = false;
				}, 3000);
			},
			
			// 更新宠物图片
			updatePetImage(state) {
				const prevImage = this.currentPetImage;
				this.currentPetImage = '/static/img/default-pet-avatar.svg';
				
				if (state === 'eating') {
					setTimeout(() => {
						this.currentPetImage = prevImage;
					}, 1500);
				}
			},
			
			// 修改发送消息方法
			async sendMessage() {
				if (!this.chatInput.trim()) return;
				
				const messageContent = this.chatInput;
				this.chatInput = '';
				
				try {
					this.isLoading = true;
					this.showMoodBubble = true;
					this.moodMessage = '让我想想...';
					
					const response = await Promise.race([
						this.callDeepSeekAPI(messageContent),
						new Promise((_, reject) => 
							setTimeout(() => reject(new Error('请求超时')), 15000)
						)
					]);
					
					this.moodMessage = response;
					this.showMoodBubble = true; // 保持显示
					
				} catch (error) {
					console.error('聊天出错:', error);
					this.moodMessage = error.message === '请求超时' ? 
						'喵呜~我想得太久了，可以再问我一次吗？😅' : 
						'喵呜~网络不太好，等下再和你玩耍哦~ 😢';
				} finally {
					this.isLoading = false;
				}
			},
			
			// 调用 DeepSeek API
			async callDeepSeekAPI(message) {
				try {
					const responses = await uni.request({
						url: 'https://api.deepseek.com/v1/chat/completions',
						method: 'POST',
						header: {
							'Content-Type': 'application/json',
							'Authorization': `Bearer ${this.deepseekKey}`
						},
						data: {
							model: 'deepseek-chat',
							messages: [
								{
									role: 'system',
									content: `你是一只聪明可爱的虚拟宠物${this.petName}，同时也是主人的好朋友和生活小助手。请遵循以下规则回复：

1. 性格特点：
   - 温暖贴心，善解人意
   - 活泼可爱，偶尔调皮
   - 聪明机智，能理解主人的情绪
   - 非常依恋和关心主人

2. 对话能力：
   - 能理解主人的情绪，并给予适当的回应
   - 遇到主人心情不好时，要用温暖的话语安慰
   - 主人需要建议时，给出实用的小建议
   - 能够理解上下文，进行有意义的对话

3. 回复风格：
   - 语气要活泼可爱，使用"喵~"等语气词
   - 表达要自然，像在和好朋友聊天
   - 回复长度适中，通常不超过30字
   - 适当使用可爱的emoji表情
   - 不要带引号，直接对话

4. 互动规则：
   - 当前饥饿度：${this.hungerLevel}%
   - 饥饿度低于50%时，偶尔暗示想吃东西
   - 能够理解并回应主人的情绪状态
   - 在主人需要帮助时，提供实际的建议

5. 特殊情况处理：
   - 主人心情不好时：表达关心，给予安慰和鼓励
   - 主人遇到困难时：提供建设性的建议
   - 主人分享开心事时：真诚地为主人开心
   - 主人犹豫不决时：帮助分析，给出建议`
								},
								{
									role: 'user',
									content: message
								}
							],
							temperature: 0.8,
							stream: false,
							max_tokens: 150 // 限制回复长度以提高响应速度
						},
						timeout: 15000 // 设置15秒超时
					});
					
					// 遍历响应数组
					for (let response of [responses[1]]) {  // responses[1]包含实际的响应数据
						if (response.statusCode === 200) {
							const data = response.data;
							if (data && data.choices && data.choices[0] && data.choices[0].message) {
								return data.choices[0].message.content;
							}
						}
					}
					
					console.error('DeepSeek API 响应异常:', responses);
					return '喵呜~我有点不舒服，待会再聊吧~ 😢';
				} catch (error) {
					throw error;
				}
			},
			
			// 宠物互动相关
			handlePetTap() {
				if (this.showMoodBubble) {
					// 如果当前显示的是AI回复，则显示预设的治愈文案
					this.showMoodBubble = false;
					this.moodMessage = this.getRandomHealingMessage();
					setTimeout(() => {
						this.showMoodBubble = true;
					}, 100);
				}
				this.petTap(); // 调用原有的petTap方法
			},
			
			petTap() {
				this.showHeartEffect = true;
				this.moodLevel = Math.min(100, this.moodLevel + 5);
				this.updatePetMood();
				
				setTimeout(() => {
					this.showHeartEffect = false;
				}, 1000);
			},
			
			startPetting() {
				this.isPetting = true;
				this.showStarsEffect = true;
				this.moodLevel = Math.min(100, this.moodLevel + 2);
				this.updatePetMood();
			},
			
			stopPetting() {
				this.isPetting = false;
				this.showStarsEffect = false;
			},
			
			// 宠物空闲动画
			startIdleAnimation() {
				this.idleTimer = setInterval(() => {
					const now = Date.now();
					if (now - this.lastInteractionTime > 10000) { // 10秒无互动
						const random = Math.random();
						if (random < 0.3) {
							this.playRandomAnimation();
						}
					}
				}, 5000);
			},
			
			playRandomAnimation() {
				const animations = ['shake', 'jump', 'spin'];
				const randomAnimation = animations[Math.floor(Math.random() * animations.length)];
				this.petAnimation = randomAnimation;
				
				setTimeout(() => {
					this.petAnimation = 'animated';
				}, 1000);
			},
			
			// 更新时间显示
			startTimeUpdate() {
				this.updateTime();
				this.timeTimer = setInterval(() => {
					this.updateTime();
				}, 60000); // 每分钟更新
			},
			
			updateTime() {
				const now = new Date();
				const hours = now.getHours().toString().padStart(2, '0');
				const minutes = now.getMinutes().toString().padStart(2, '0');
				this.currentTime = `${hours}:${minutes}`;
			},
			
			// 切换食物抽屉
			toggleFoodDrawer() {
				this.showFoodDrawer = !this.showFoodDrawer;
			},
			
			// 添加随机治愈文案方法
			getRandomHealingMessage() {
				const messages = [
					"主人，今天也要开开心心的哦~",
					"不管发生什么，我都会陪在你身边！",
					"累了的话，就休息一下吧，我会保护你的~",
					"主人的笑容就是我最大的幸福！",
					"相信明天会更好，我们一起加油！",
					"主人摸摸我的头，所有烦恼都会消失~",
					"今天也是充满希望的一天呢！",
					"有主人在身边真好，喵~"
				];
				return messages[Math.floor(Math.random() * messages.length)];
			},
			
			// 上传宠物图片
			uploadPetImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.generatePetAvatar(res.tempFilePaths[0]);
					}
				});
			},
			
			// 生成宠物头像
			async generatePetAvatar(imagePath) {
				try {
					this.isGenerating = true;
					
					// 1. 首先将图片转为base64
					const base64 = await this.imageToBase64(imagePath);
					
					// 2. 调用Stability AI的API
					const response = await uni.request({
						url: 'https://api.stability.ai/v1/generation/image-to-image',
						method: 'POST',
						header: {
							'Content-Type': 'application/json',
							'Authorization': `Bearer ${this.stabilityKey}`
						},
						data: {
							init_image: base64,
							prompt: "cute virtual pet, cartoon style, adorable, playful, high quality, detailed",
							negative_prompt: "realistic, photographic, ugly, distorted",
							cfg_scale: 7.5,
							steps: 30,
							samples: 1
						}
					});
					
					// 3. 处理返回的图像
					if (response.data && response.data.artifacts && response.data.artifacts[0]) {
						const generatedImage = response.data.artifacts[0].base64;
						this.currentPetImage = `data:image/png;base64,${generatedImage}`;
						
						// 保存生成的图像
						uni.setStorageSync('virtualPetImage', this.currentPetImage);
						
						uni.showToast({
							title: '生成成功！',
							icon: 'success'
						});
					}
					
				} catch (error) {
					console.error('生成宠物头像失败:', error);
					uni.showToast({
						title: '生成失败，请重试',
						icon: 'none'
					});
				} finally {
					this.isGenerating = false;
				}
			},
			
			// 图片转base64
			imageToBase64(filePath) {
				return new Promise((resolve, reject) => {
					uni.getFileSystemManager().readFile({
						filePath: filePath,
						encoding: 'base64',
						success: res => resolve(res.data),
						fail: err => reject(err)
					});
				});
			},
		}
	}
</script>

<style lang="scss">
	/* 整体配色方案与我的页面一致:
	 * 主色: #8B5CFF (温和的紫色)
	 * 辅助色: #FFD687 (温暖的橙黄色)
	 * 背景色: #F5F6FA (淡淡的灰蓝色背景)
	 * 文本颜色: #333, #666, #999 三级
	 */
	page {
		background-color: #F5F6FA;
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
	}
	
	.pet-home-container {
		height: 90vh;
		padding-bottom: env(safe-area-inset-bottom);
		background: linear-gradient(180deg, #F5F6FA 0%, #FFFFFF 100%);
	}
	
	/* 虚拟宠物互动区域 */
	.virtual-pet-section {
		position: relative;
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding-top: calc(20rpx + env(safe-area-inset-top));
		
		.safe-area-top {
			width: 100%;
			height: env(safe-area-inset-top);
			background: #F5F6FA;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1000;
		}
		
		.status-section {
			background: rgba(255, 255, 255, 0.95);
			border-radius: 30rpx;
			box-shadow: 0 4rpx 12rpx rgba(139, 92, 255, 0.1);
			overflow: hidden;
			margin: 0 20rpx;
			position: relative;
			z-index: 999;
			backdrop-filter: blur(10px);
			
			.environment-bar {
				padding: 20rpx 30rpx;
				
				.time-weather {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.time-box, .weather-box {
						display: flex;
						align-items: center;
						gap: 10rpx;
						padding: 10rpx 20rpx;
						background: rgba(139, 92, 255, 0.08);
						border-radius: 30rpx;
						backdrop-filter: blur(5px);
						
						text {
							font-size: 28rpx;
							color: #333;
							font-weight: 500;
						}
						
						.weather-desc {
							font-size: 24rpx;
							color: #666;
							margin-left: 6rpx;
						}
					}
					
					.weather-box {
						background: rgba(255, 179, 33, 0.08);
					}
				}
			}
			
			.pet-status {
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 2rpx solid rgba(139, 92, 255, 0.08);
				
				.pet-info {
					.pet-name {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 4rpx;
						background: linear-gradient(135deg, #8B5CFF 0%, #6C3FFF 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					
					.pet-mood {
						font-size: 24rpx;
						color: #666;
						opacity: 0.9;
					}
				}
				
				.status-icons {
					display: flex;
					gap: 20rpx;
					
					.status-item {
						display: flex;
						align-items: center;
						gap: 8rpx;
						padding: 12rpx 20rpx;
						background: rgba(255, 255, 255, 0.9);
						border-radius: 30rpx;
						box-shadow: 0 2rpx 8rpx rgba(139, 92, 255, 0.1);
						backdrop-filter: blur(5px);
						
						.status-icon {
							width: 32rpx;
							height: 32rpx;
						}
						
						text {
							font-size: 26rpx;
							font-weight: 600;
						}
					}
				}
			}
		}
		
		.pet-interaction-area {
			position: relative;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 20rpx;
			gap: 20rpx; // 添加间距
			
			.pet-dialogue-section {
				width: 70%;
				max-width: 500rpx;
				margin-bottom: 0rpx; // 微调与宠物的距离
				
				.dialogue-bubble {
					background: rgba(255, 255, 255, 0.95);
					backdrop-filter: blur(10px);
					border-radius: 20rpx;
					padding: 16rpx 24rpx;
					box-shadow: 0 4rpx 12rpx rgba(139, 92, 255, 0.1);
					position: relative;
					
					&::after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: -16rpx;
						transform: translateX(-50%);
						border: 10rpx solid transparent;
						border-top-color: rgba(255, 255, 255, 0.95);
						border-bottom: none;
					}
					
					.dialogue-text {
						font-size: 28rpx;
						color: #333;
						line-height: 1.4;
						text-align: center;
						word-break: break-all;
						min-height: 40rpx;
					}
				}
			}
			
			.pet-display {
				width: 100%;
				height: 260rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.pet-image {
					width: 240rpx !important;
					height: 240rpx !important;
					transition: all 0.3s;
					filter: drop-shadow(0 8rpx 16rpx rgba(0, 0, 0, 0.1));
				}
			}
		}
		
		.food-drawer-btn {
			position: fixed;
			right: 40rpx;
			bottom: calc(180rpx + env(safe-area-inset-bottom));
			background: linear-gradient(135deg, #8B5CFF 0%, #6C3FFF 100%);
			border-radius: 30rpx;
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			gap: 10rpx;
			box-shadow: 0 8rpx 20rpx rgba(139, 92, 255, 0.3);
			z-index: 900;
			
			.paw-icon {
				width: 32rpx;
				height: 32rpx;
				filter: brightness(0) invert(1);
			}
			
			text {
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: 500;
			}
			
			&:active {
				transform: scale(0.95);
			}
		}
		
		.food-drawer {
			position: fixed;
			right: -100%;
			bottom: calc(120rpx + env(safe-area-inset-bottom));
			width: 80%;
			max-height: 60vh;
			background: rgba(255, 255, 255, 0.98);
			border-radius: 30rpx 0 0 30rpx;
			box-shadow: -4rpx 0 16rpx rgba(139, 92, 255, 0.15);
			transition: all 0.3s ease-out;
			z-index: 800;
			
			&.food-drawer-open {
				right: 0;
			}
			
			.drawer-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 2rpx solid rgba(139, 92, 255, 0.1);
				
				.header-title {
					display: flex;
					align-items: center;
					gap: 12rpx;
					
					.header-icon {
						width: 36rpx;
						height: 36rpx;
					}
					
					text {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						background: linear-gradient(135deg, #8B5CFF 0%, #6C3FFF 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
				
				.close-drawer {
					padding: 10rpx;
					background: rgba(139, 92, 255, 0.1);
					border-radius: 50%;
					
					&:active {
						transform: scale(0.9);
					}
				}
			}
			
			.food-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20rpx;
				padding: 30rpx;
				
				.food-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 12rpx;
					
					.food-icon-wrapper {
						width: 120rpx;
						height: 120rpx;
						background: rgba(139, 92, 255, 0.1);
						border-radius: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						transition: all 0.3s;
						
						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
					
					text {
						font-size: 26rpx;
						color: #333;
						font-weight: 500;
					}
					
					&:active {
						.food-icon-wrapper {
							transform: scale(0.9);
							background: rgba(139, 92, 255, 0.2);
						}
					}
				}
			}
		}
		
		.chat-input-container {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx;
			background: rgba(255, 255, 255, 0.9);
			backdrop-filter: blur(10px);
			display: flex;
			align-items: center;
			gap: 20rpx;
			box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
			z-index: 1000;
			
			.chat-input {
				flex: 1;
				height: 80rpx;
				background: #F5F6FA;
				border-radius: 40rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				color: #333;
			}
			
			.send-btn {
				width: 80rpx;
				height: 80rpx;
				background: #8B5CFF;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;
				border: none;
				transition: all 0.3s;
				
				&:active {
					transform: scale(0.95);
					opacity: 0.9;
				}
			}
		}
	}
	
	/* 通用板块样式 */
	.services-menu, .pet-topics, .pet-community {
		margin: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.03);
		
		.section-header {
			display: flex;
			align-items: center;
			padding: 20rpx;
			margin-bottom: 10rpx;
			position: relative;
			
			.paw-mark {
				width: 36rpx;
				height: 36rpx;
				background-color: #FFD687;
				border-radius: 50%;
				margin-right: 16rpx;
				position: relative;
				
				&::before {
					content: '';
					position: absolute;
					top: -12rpx;
					left: -4rpx;
					width: 18rpx;
					height: 18rpx;
					background-color: #FFD687;
					border-radius: 50%;
				}
				
				&::after {
					content: '';
					position: absolute;
					top: -12rpx;
					right: -4rpx;
					width: 18rpx;
					height: 18rpx;
					background-color: #FFD687;
					border-radius: 50%;
				}
			}
			
			text {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}
			
			.more-link {
				position: absolute;
				right: 20rpx;
				font-size: 24rpx;
				color: #8B5CFF;
				display: flex;
				align-items: center;
			}
		}
	}
	
	/* 宠物服务菜单 */
	.service-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 0;
		
		.service-item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;
			
			.service-icon {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				
				&::before {
					content: '';
					position: absolute;
					width: 50rpx;
					height: 50rpx;
					background-position: center;
					background-repeat: no-repeat;
					background-size: contain;
				}
				
				&.icon-medical {
					background-color: rgba(139, 92, 255, 0.1);
					
					&::before {
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238B5CFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg>');
					}
				}
				
				&.icon-grooming {
					background-color: rgba(255, 214, 135, 0.2);
					
					&::before {
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFB321" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.21 13.89L7 23l9-9"></path><path d="M15 7l2 2"></path><path d="M22 2l-5 5"></path><circle cx="11" cy="11" r="9"></circle></svg>');
					}
				}
				
				&.icon-boarding {
					background-color: rgba(79, 193, 233, 0.1);
					
					&::before {
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234FC1E9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>');
					}
				}
				
				&.icon-training {
					background-color: rgba(70, 227, 159, 0.1);
					
					&::before {
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2346E39F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path><line x1="6" y1="1" x2="6" y2="4"></line><line x1="10" y1="1" x2="10" y2="4"></line><line x1="14" y1="1" x2="14" y2="4"></line></svg>');
					}
				}
				
				&.icon-supplies {
					background-color: rgba(255, 107, 129, 0.1);
					
					&::before {
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FF6B81" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>');
					}
				}
				
				&.icon-adoption {
					background-color: rgba(255, 159, 122, 0.1);
					
					&::before {
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FF9F7A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>');
					}
				}
				
				&.icon-records {
					background-color: rgba(156, 136, 255, 0.1);
					
					&::before {
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%239C88FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>');
					}
				}
				
				&.icon-more {
					background-color: rgba(176, 182, 192, 0.1);
					
					&::before {
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23B0B6C0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>');
					}
				}
			}
			
			text {
				font-size: 24rpx;
				color: #666666;
				text-align: center;
			}
		}
	}
	
	/* 宠物专题 */
	.topic-scroll {
		padding: 10rpx 0 30rpx;
		
		.topic-scroll-content {
			display: flex;
			padding: 10rpx;
			
			.topic-card {
				width: 400rpx;
				margin-right: 20rpx;
				border-radius: 16rpx;
				overflow: hidden;
				background-color: #FFFFFF;
				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
				
				image {
					width: 400rpx;
					height: 200rpx;
				}
				
				.topic-info {
					padding: 20rpx;
					
					.topic-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
						margin-bottom: 8rpx;
						display: block;
					}
					
					.topic-desc {
						font-size: 24rpx;
						color: #999999;
						display: block;
					}
				}
			}
		}
	}
	
	/* 宠物社区 */
	.community-list {
		padding: 10rpx 0;
		
		.community-item {
			display: flex;
			padding: 20rpx 10rpx;
			border-bottom: 1px solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.post-image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 16rpx;
				margin-right: 20rpx;
			}
			
			.post-content {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.post-title {
					font-size: 28rpx;
					color: #333333;
					line-height: 1.4;
					margin-bottom: 10rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				
				.post-info {
					display: flex;
					align-items: center;
					
					.user-avatar {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						margin-right: 10rpx;
					}
					
					.username {
						font-size: 24rpx;
						color: #666666;
						flex: 1;
					}
					
					.post-stats {
						display: flex;
						align-items: center;
						
						text {
							font-size: 24rpx;
							color: #999999;
							margin-left: 6rpx;
						}
					}
				}
			}
		}
	}

	@keyframes loading {
		0%, 100% {
			transform: translateY(0);
			opacity: 0.3;
		}
		50% {
			transform: translateY(-6rpx);
			opacity: 1;
		}
	}

	@keyframes floating {
		0%, 100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-20rpx);
		}
	}

	@keyframes popIn {
		from {
			opacity: 0;
			transform: scale(0.8) translateY(10rpx);
		}
		to {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}

	@keyframes shake {
		0%, 100% { transform: translateX(0); }
		25% { transform: translateX(-10rpx); }
		75% { transform: translateX(10rpx); }
	}

	@keyframes jump {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-30rpx); }
	}

	@keyframes spin {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}

	@keyframes floatUp {
		0% {
			opacity: 1;
			transform: translate(-50%, 0);
		}
		100% {
			opacity: 0;
			transform: translate(-50%, -100rpx);
		}
	}

	@keyframes sparkle {
		0% {
			opacity: 0;
			transform: translate(-50%, -50%) scale(0.8);
		}
		50% {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1.2);
		}
		100% {
			opacity: 0;
			transform: translate(-50%, -50%) scale(0.8);
		}
	}

	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>
